<script setup lang="ts">
</script>

<template>
  <section class="pt-22 pb-6 bg-[#eef2ff]">
    <div class="wty-container mx-auto px-4">
      <div class="flex flex-col lg:flex-row gap-8">
        <!-- 左侧：核心价值区（约60%宽度） -->
        <div class="lg:w-[60%] space-y-6 bg-white rounded-xl p-4 relative h-[486px]">


<!--          <div class="block " style="height: 400px;background-color: red">-->
<!--            <el-carousel height="auto" autoplay>-->
<!--              <el-carousel-item style="height: 400px">-->

<!--                <h5 class="text-primary font-medium">数字工具创意平台</h5>-->
<!--                <h1 class="text-[clamp(1rem,3vw,2.5rem)] font-bold leading-tight">-->
<!--                  用代码创造实用工具<br>-->
<!--                  <span-->
<!--                      class="bg-gradient-to-r from-python to-primary text-gradient gradient-text">从Python开始，创意不止不休</span>-->
<!--                </h1>-->
<!--                <p class="text-lg text-gray-600 max-w-lg">-->
<!--                  这里是程序员与需求者的对接站：学习编程、获取工具、定制系统、创意变现。以Python为核心，辐射多领域技术解决方案。-->
<!--                </p>-->
<!--                <div class="flex flex-wrap gap-4 pt-4">-->
<!--                  <a href="#tech"-->
<!--                     class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-lg hover:shadow-xl">-->
<!--                    探索技术领域 <i class="fa fa-arrow-right ml-2"></i>-->
<!--                  </a>-->
<!--                  <a href="#tools"-->
<!--                     class="px-8 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-all">-->
<!--                    浏览工具商城-->
<!--                  </a>-->
<!--                </div>-->

<!--                &lt;!&ndash; 信任背书 &ndash;&gt;-->
<!--                <div class="pt-6 flex items-center gap-2 text-gray-500">-->
<!--                  <div class="flex -space-x-2">-->
<!--                    <img src="https://picsum.photos/id/1001/40/40" alt="用户头像"-->
<!--                         class="w-8 h-8 rounded-full border-2 border-white">-->
<!--                    <img src="https://picsum.photos/id/1002/40/40" alt="用户头像"-->
<!--                         class="w-8 h-8 rounded-full border-2 border-white">-->
<!--                    <img src="https://picsum.photos/id/1003/40/40" alt="用户头像"-->
<!--                         class="w-8 h-8 rounded-full border-2 border-white">-->
<!--                    <div-->
<!--                        class="w-8 h-8 rounded-full bg-primary/10 text-primary text-xs flex items-center justify-center border-2 border-white">-->
<!--                      3k+-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <span>3000+开发者与用户的共同选择</span>-->
<!--                </div>-->


<!--              </el-carousel-item>-->
<!--              <el-carousel-item style="height: 200px">-->
<!--                <h3 class="small justify-center" text="2xl">height 200px</h3>-->
<!--              </el-carousel-item>-->
<!--              <el-carousel-item style="height: 300px">-->
<!--                <h3 class="small justify-center" text="2xl">height 300px</h3>-->
<!--              </el-carousel-item>-->
<!--            </el-carousel>-->
<!--          </div>-->


          <h5 class="text-primary font-medium">数字工具创意平台</h5>
          <h1 class="text-[clamp(1rem,3vw,2.5rem)] font-bold leading-tight">
            用代码创造实用工具<br>
            <span
                class="bg-gradient-to-r from-python to-primary text-gradient gradient-text">从Python开始，创意不止休</span>
          </h1>


          <p class="text-lg text-gray-600 max-w-lg">
            这里是程序员与需求者的对接站：学习编程、获取工具、定制系统、创意变现。以Python为核心，辐射多领域技术解决方案。
          </p>

          <div class="flex flex-wrap gap-4 pt-4">
            <a href="#tech"
               class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-lg hover:shadow-xl">
              探索技术领域 <i class="fa fa-arrow-right ml-2"></i>
            </a>
            <a href="#tools"
               class="px-8 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-all">
              浏览工具商城
            </a>
          </div>

          <!-- 信任背书 -->
          <div class="pt-6 flex items-center gap-2 text-gray-500">
            <div class="flex -space-x-2">
              <img src="https://picsum.photos/id/1001/40/40" alt="用户头像"
                   class="w-8 h-8 rounded-full border-2 border-white">
              <img src="https://picsum.photos/id/1002/40/40" alt="用户头像"
                   class="w-8 h-8 rounded-full border-2 border-white">
              <img src="https://picsum.photos/id/1003/40/40" alt="用户头像"
                   class="w-8 h-8 rounded-full border-2 border-white">
              <div
                  class="w-8 h-8 rounded-full bg-primary/10 text-primary text-xs flex items-center justify-center border-2 border-white">
                3k+
              </div>
            </div>
            <span>3000+开发者与用户的共同选择</span>
          </div>


        </div>

        <!-- 右侧：分为上下两部分（约40%宽度） -->
        <div class="lg:w-[40%] flex flex-col gap-6">
          <!-- 右上部分：公告栏 -->
          <div class="bg-white rounded-2xl shadow-xl p-4 border border-gray-100 flex-1">
            <!-- 公告栏标题 -->
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center gap-2">
                <div class="w-8 h-8 bg-notice/10 rounded-full flex items-center justify-center">
                  <i class="fa fa-bullhorn text-notice"></i>
                </div>
                <h3 class="font-bold text-xl">平台公告</h3>
              </div>
              <a href="#" class="text-primary text-sm hover:underline">更多</a>
            </div>
            <!-- 公告列表 -->
            <div class="space-y-3">
              <!-- 公告1 -->


              <div class=" pl-4  border-l-4 border-notice">
                <div class="flex mb-2">
                  <div class="grow  ">Python工具库新增5款自动化工具</div>
                  <div class="flex-none w-20">
                    <span class="text-gray-500 text-xs">2024-05-20</span>
                  </div>
                </div>
                <!--  --------------  -->
                <div class="flex mb-2">
                  <div class="grow ">
                    <p class="text-gray-600 text-sm line-clamp-1">
                      本次更新包含Excel批量数据清洗、PDF转Word等5款高频工具...
                    </p>
                  </div>
                  <div class="flex-none w-20">
                    <a href="#" class="text-primary text-xs mt-1 inline-block hover:underline">查看详情</a>
                  </div>
                </div>
              </div>

              <div class=" pl-4  border-l-4 border-primary">
                <div class="flex mb-2">
                  <div class="grow  ">Python工具库新增5款自动化工具</div>
                  <div class="flex-none w-20">
                    <span class="text-gray-500 text-xs">2024-05-20</span>
                  </div>
                </div>
                <!--  --------------  -->
                <div class="flex mb-2">
                  <div class="grow ">
                    <p class="text-gray-600 text-sm line-clamp-1">
                      本次更新包含Excel批量数据清洗、PDF转Word等5款高频工具...
                    </p>
                  </div>
                  <div class="flex-none w-20">
                    <a href="#" class="text-primary text-xs mt-1 inline-block hover:underline">查看详情</a>
                  </div>
                </div>
              </div>

              <div class=" pl-4  border-l-4 border-green-500">
                <div class="flex mb-2">
                  <div class="grow  ">Python工具库新增5款自动化工具</div>
                  <div class="flex-none w-20">
                    <span class="text-gray-500 text-xs">2024-05-20</span>
                  </div>
                </div>
                <!--  --------------  -->
                <div class="flex mb-2">
                  <div class="grow ">
                    <p class="text-gray-600 text-sm line-clamp-1">
                      本次更新包含Excel批量数据清洗、PDF转Word等5款高频工具...
                    </p>
                  </div>
                  <div class="flex-none w-20">
                    <a href="#" class="text-primary text-xs mt-1 inline-block hover:underline">查看详情</a>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <!-- 右下部分：分为两个小入口 -->
          <div class="grid grid-cols-2 gap-4">
            <!-- 右下左：快速接单入口 -->
            <div class="feature-card bg-white rounded-2xl p-5 border border-gray-100 shadow-md">
              <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mb-3">
                <i class="fa fa-handshake-o text-green-600"></i>
              </div>
              <h4 class="font-bold mb-2">快速接单</h4>
              <p class="text-gray-600 text-sm mb-3">查看最新需求，一键接单</p>
              <a href="#" class="text-green-600 text-xs font-medium hover:underline">
                立即查看 <i class="fa fa-angle-right ml-1"></i>
              </a>
            </div>

            <!-- 右下右：热门工具入口 -->
            <div class="feature-card bg-white rounded-2xl p-5 border border-gray-100 shadow-md">
              <div class="w-10 h-10 bg-python/10 rounded-lg flex items-center justify-center mb-3">
                <i class="fa fa-star text-python"></i>
              </div>
              <h4 class="font-bold mb-2">热门工具</h4>
              <p class="text-gray-600 text-sm mb-3">本周TOP5实用工具</p>
              <a href="#" class="text-python text-xs font-medium hover:underline">
                立即查看 <i class="fa fa-angle-right ml-1"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 核心服务区 - 调整到技术领域上方 -->
  <section id="services" class="py-8 bg-neutral">
    <div class="wty-container mx-auto px-4">
      <div class="text-center mb-8">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">我们的核心服务</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">无论哪个技术领域，都能享受一致的优质服务体验</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 服务1：学习成长 -->
        <div class="bg-white rounded-2xl p-8 hover:shadow-lg transition-shadow">
          <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
<!--            <i class="fa fa-book text-primary text-2xl"></i>-->
            <i class="ri-pencil-ruler-2-fill text-3xl text-pink-300" ></i>
          </div>
          <h3 class="text-xl font-bold mb-3">学习成长</h3>
          <p class="text-gray-600 mb-6">从零基础到实战高手的阶梯式课程，每个领域都有清晰的学习路径和实战项目</p>
          <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
            浏览全部课程 <i class="fa fa-long-arrow-right ml-2"></i>
          </a>
        </div>

        <!-- 服务2：工具商城 -->
        <div class="bg-white rounded-2xl p-8 hover:shadow-lg transition-shadow">
          <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
            <i class="ri-hammer-line text-green-500 text-3xl"></i>
<!--            <i class="ri-tools-line text-green-500 text-3xl"></i>-->
          </div>
          <h3 class="text-xl font-bold mb-3">工具商城</h3>
          <p class="text-gray-600 mb-6">各领域实用工具、源码、模板，支持免费试用，会员享专属折扣</p>
          <a href="#tools" class="inline-flex items-center text-primary font-medium hover:underline">
            逛工具商城 <i class="fa fa-long-arrow-right ml-2"></i>
          </a>
        </div>

                <!-- 服务2：工具商城 -->
        <div class="bg-white rounded-2xl p-8 hover:shadow-lg transition-shadow">
          <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
            <i class="ri-line-chart-fill text-sky-500 text-3xl"></i>
<!--            <i class="ri-tools-line text-green-500 text-3xl"></i>-->
          </div>
          <h3 class="text-xl font-bold mb-3">数据服务</h3>
          <p class="text-gray-600 mb-6">各领域数据分析、处理、建模，支持免费试用，会员享专属折扣</p>
          <a href="#tools" class="inline-flex items-center text-primary font-medium hover:underline">
            逛工具商城 <i class="fa fa-long-arrow-right ml-2"></i>
          </a>
        </div>

        <!-- 服务3：创意对接 -->
        <div class="bg-white rounded-2xl p-8 hover:shadow-lg transition-shadow">
          <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
<!--            <i class="fa fa-handshake-o text-primary text-2xl"></i>-->
            <i class="ri-shake-hands-fill text-red-400 text-3xl"></i>
          </div>
          <h3 class="text-xl font-bold mb-3">创意对接</h3>
          <p class="text-gray-600 mb-6">发布需求、定制开发、创意变现，连接开发者与需求者的桥梁</p>
          <a href="#creative" class="inline-flex items-center text-primary font-medium hover:underline">
            发布需求 <i class="fa fa-long-arrow-right ml-2"></i>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- 技术领域入口区 -->
  <section id="tech" class="py-16 bg-white">
    <div class="wty-container mx-auto px-4">
      <div class="text-center mb-12">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">探索技术领域</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">以Python为核心，辐射多元技术领域，找到适合你的解决方案</p>
      </div>

      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
        <!-- 核心领域：Python -->
        <div
            class="tech-card-active bg-white rounded-2xl p-6 border border-python/20 flex flex-col items-center text-center transition-all duration-300">
          <div class="w-16 h-16 bg-python/10 rounded-full flex items-center justify-center mb-4">
            <i class="fa fa-python text-python text-2xl"></i>
          </div>
          <h3 class="font-bold text-lg mb-1">Python</h3>
          <p class="text-sm text-gray-500">核心领域</p>
        </div>

        <!-- 扩展领域：Java -->
        <div
            class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-java/20 hover:shadow-md transition-all duration-300">
          <div class="w-16 h-16 bg-java/10 rounded-full flex items-center justify-center mb-4">
            <i class="fa fa-coffee text-java text-2xl"></i>
          </div>
          <h3 class="font-bold text-lg mb-1">Java</h3>
          <p class="text-sm text-gray-500">扩展中</p>
        </div>

        <!-- 扩展领域：MySQL -->
        <div
            class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-mysql/20 hover:shadow-md transition-all duration-300">
          <div class="w-16 h-16 bg-mysql/10 rounded-full flex items-center justify-center mb-4">
            <i class="ri-database-2-fill text-3xl text-green-400"></i>
          </div>
          <h3 class="font-bold text-lg mb-1">MySQL</h3>
          <p class="text-sm text-gray-500">扩展中</p>
        </div>

        <!-- 扩展领域：Excel -->
        <div
            class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-excel/20 hover:shadow-md transition-all duration-300">
          <div class="w-16 h-16 bg-excel/10 rounded-full flex items-center justify-center mb-4">
            <i class="fa fa-table text-excel text-2xl"></i>
          </div>
          <h3 class="font-bold text-lg mb-1">Excel</h3>
          <p class="text-sm text-gray-500">扩展中</p>
        </div>

        <!-- 扩展领域：前端开发 -->
        <div
            class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-web/20 hover:shadow-md transition-all duration-300">
          <div class="w-16 h-16 bg-web/10 rounded-full flex items-center justify-center mb-4">
            <i class="fa fa-code text-web text-2xl"></i>
          </div>
          <h3 class="font-bold text-lg mb-1">前端开发</h3>
          <p class="text-sm text-gray-500">扩展中</p>
        </div>
      </div>

      <!-- Python核心内容预览 -->
      <div class="mt-16 bg-neutral rounded-2xl p-8">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
          <div>
            <h3 class="text-2xl font-bold flex items-center gap-2">
                <span class="w-8 h-8 bg-python/10 rounded-full flex items-center justify-center">
                  <i class="fa fa-python text-python"></i>
                </span>
              Python 精选内容
            </h3>
            <p class="text-gray-600">我们的核心领域，提供从入门到变现的全链路服务</p>
          </div>
          <a href="#" class="mt-4 md:mt-0 text-primary font-medium hover:underline">查看全部 <i
              class="fa fa-angle-right ml-1"></i></a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 学习资源 -->
          <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <div class="w-12 h-12 bg-python/10 rounded-lg flex items-center justify-center mb-4">
              <i class="fa fa-graduation-cap text-python"></i>
            </div>
            <h4 class="font-bold text-lg mb-2">学习路径</h4>
            <p class="text-gray-600 text-sm mb-4">从基础语法到实战工具开发，30天做出第一个产品</p>
            <ul class="text-sm space-y-2 mb-4">
              <li class="flex items-center gap-2 text-gray-600">
                <i class="fa fa-check text-green-500 text-xs"></i> 50+实战课程
              </li>
              <li class="flex items-center gap-2 text-gray-600">
                <i class="fa fa-check text-green-500 text-xs"></i> 10+成品工具开发
              </li>
            </ul>
            <a href="#" class="text-python text-sm font-medium hover:underline">开始学习 →</a>
          </div>

          <!-- 工具资源 -->
          <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <div class="w-12 h-12 bg-python/10 rounded-lg flex items-center justify-center mb-4">
              <i class="fa fa-wrench text-python"></i>
            </div>
            <h4 class="font-bold text-lg mb-2">实用工具</h4>
            <p class="text-gray-600 text-sm mb-4">批量处理、数据爬取、自动化办公等高效工具</p>
            <ul class="text-sm space-y-2 mb-4">
              <li class="flex items-center gap-2 text-gray-600">
                <i class="fa fa-check text-green-500 text-xs"></i> 30+精选工具
              </li>
              <li class="flex items-center gap-2 text-gray-600">
                <i class="fa fa-check text-green-500 text-xs"></i> 持续更新中
              </li>
            </ul>
            <a href="#" class="text-python text-sm font-medium hover:underline">浏览工具 →</a>
          </div>

          <!-- 变现资源 -->
          <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
            <div class="w-12 h-12 bg-python/10 rounded-lg flex items-center justify-center mb-4">
              <i class="fa fa-money text-python"></i>
            </div>
            <h4 class="font-bold text-lg mb-2">变现渠道</h4>
            <p class="text-gray-600 text-sm mb-4">接单技巧、工具销售、定制服务等变现指南</p>
            <ul class="text-sm space-y-2 mb-4">
              <li class="flex items-center gap-2 text-gray-600">
                <i class="fa fa-check text-green-500 text-xs"></i> 接单案例拆解
              </li>
              <li class="flex items-center gap-2 text-gray-600">
                <i class="fa fa-check text-green-500 text-xs"></i> 定价策略指导
              </li>
            </ul>
            <a href="#" class="text-python text-sm font-medium hover:underline">了解变现 →</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 行动召唤区 -->
  <section class="py-20 bg-gradient-to-r from-primary bg-blue-500">
    <div class="wty-container mx-auto px-4 text-center">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-6">
        加入数字工具创意平台，开启技术变现之旅
      </h2>
      <p class="text-white/80 max-w-2xl mx-auto mb-10 text-lg">
        注册即送7天会员体验，全领域课程与工具免费试用，探索适合你的技术方向
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="#register"
           class="px-8 py-4 bg-white text-primary rounded-lg font-medium hover:bg-gray-100 transition-colors shadow-lg">
          立即注册，免费体验
        </a>
        <a href="#about"
           class="px-8 py-4 bg-transparent text-white border border-white rounded-lg font-medium hover:bg-white/10 transition-colors">
          了解更多
        </a>
      </div>
    </div>
  </section>
</template>


<style scoped>


.gradient-text {
  /* 1. 定义渐变方向和颜色（从左到右，红→蓝） */
  background-image: linear-gradient(to right, #ff0000, #0000ff);
  /* 2. 将背景裁剪到文字 */
  background-clip: text;
  -webkit-background-clip: text; /* 兼容 Safari */
  /* 3. 文字透明，显示背景渐变 */
  color: transparent;
}

.carousel-item {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
